<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_296915_gmmhr5h7t2sgiudi.css"/>
    <link href="../style/fjol_style.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../style/xol_style.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    	
    </script>
	</head>
	<style>
		body, html{
			background: #f5f7f7;
		}
		#segmentedControls .mui-control-item {
				line-height: 40px;
				width: 100%;
			}
	</style>
	<body>
		<span class="dn" id="bgZhezhao" style="position: fixed; top: 100px; bottom: 0; width: 100%; background: rgba(0,0,0,0.3); z-index: 1;"></span>
		
		<header class="mui-bar mui-bar-nav p0 newbgRed">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <div class="mui-input-row mui-search pct80" style="margin-left: 5%; display: inline-block;">
		        <input id="openSearchPage" type="search" class="mui-input-clear" placeholder="请输入商家名称进行搜索" style="background: white; border-radius: 20px;">
		    </div>
		<div class="bg-white">
		    
			<div class="fj-house-tab rel pb5" style="border-bottom: 1px solid #ddd;">
			<div class="mui-segmented-control bg-white p10">
		          <a class="mui-control-item mui-text-center chooseArea">区域</a>
		          <a class="mui-control-item tab-a mui-text-right"><b class="down-triangle ml2"></b></a>
		     </div>
		      <div class="fj-house-tab-div abs" style="z-index: 9;">
		      	
		      	<div class="mui-row mui-hidden house-tab-ul bg-white">
	      	        <div class="bg-white p10" style=" max-height: 300px; overflow-y: auto;">
						<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
							<a class="mui-control-item mui-text-left" id="allArea" href="">
			  	                 不限
			  	            </a>
						</div>
					</div>
					<div id="segmentedControlContents" class="mui-col-xs-8" style="border-left: 1px solid #c8c7cc; max-height: 300px; overflow-y: auto;">
						<div class="mui-control-content mui-active">
						</div>
					</div>
	      	    </div>
		      	    
		      	           
		      </div>
		   </div>
		   </div>
		</header>
		
		<div class="mui-content rel" style="top: 55px; bottom: 85px;">
		    <div class="mui-scroll-wrapper" style="overflow: initial;">
		        <div class="mui-scroll" id="refreshContainer">
		            <!--这里放置真实显示的DOM内容-->
		            <div class="" id="houselist">
		               
		            </div>
		        </div>
		    </div>
		    
		</div>
		
		
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/jquery.tmpl.min.js"></script>
		<script src="../js/generalUtil.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/network.js"></script>
		<script src="../js/fj_area_util.js"></script>
		<script src="../js/fj_base_data.js"></script>
		<script src="../js/xzx.open.js"></script>
		<script id="areaTmpl" type="text/x-jquery-tmpl">
  	            <a class="mui-control-item mui-text-left" id="${identId}" data-grade="${grade}" href="${parentId}">
  	                 ${areaName}
  	            </a>
		</script>
		<script id="houseListTmpl" type="text/x-jquery-tmpl">
			<div class="agentList p10 pt5">
		        <div class="agentDetail" id="${id}">
		        	<div class="flex" style="align-items:flex-start;;">
			            <!--<img class="mr5" src="${coverImage}" style="max-width: 100px;">-->
			            <div class="mr5" style="border-radius: 4px;width: 80px; height: 80px; overflow: hidden;">
			        		{{if coverImage}}
			        		<img src="${coverImage}">
			        		{{else}}
			        		<img src="../images/icon_blank.png">
			        		{{/if}}
		        		</div>
			            <div class="flexCell" style="line-height: normal;">
			                <span>${name}</span>
			                <p class="f08">${area}</p>
			                <p class="m0 f08"><i class="iconfont icon-phone f15"></i>${telephone}</p>
			                <p class="f08"><i class="iconfont icon-address"></i>${address}</p>
			            </div>
		        	</div>
		        </div>
		    </div>
		</script>
		<script type="text/javascript">
		mui.init({
				pullRefresh:{
					container:"#refreshContainer",
					up:{
						callback:pullupRefresh
					}
				}
		});	
		
			
			var pagevalue =1;
			
			var _listArr,
				 areaIdentId= -1,
				streetIdentId= -1,
				 searchIpt = '';
				 shopTypeEnumValue = -1;
			var dataListArr = [];	//存储分页所有数据
			
			function pulldownRefresh(){
				$('.mui-pull').hide();
				setTimeout(function(){
//					console.log(areaIdentId+','+streetIdentId);
					getHouseList(1,true,searchIpt,shopTypeEnumValue,areaIdentId,streetIdentId);
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
					return pagevalue=1;
				},1000);
			}
			function pullupRefresh(){
				$('.mui-pull').show();
				setTimeout(function(){
//					console.log(areaIdentId+','+streetIdentId);
					pagevalue++;
					getHouseList(pagevalue,false,searchIpt,shopTypeEnumValue,areaIdentId,streetIdentId);
				},1000);
			}
			
			mui.plusReady(function(){
				var wv = plus.webview.currentWebview();
				var _type = wv.type;	//1工装；2家装；3家政；4便民；5美食；6有钱
//				console.log(_type);
				switch(_type){
					case 1:	//工装
					shopTypeEnumValue = 3; break;
					case 2:	//家装
					shopTypeEnumValue = 4; break;
					case 3:	//家政
					shopTypeEnumValue = 5; break;
					case 4:	//便民
					shopTypeEnumValue = 2; break;
					case 5:	//美食
					shopTypeEnumValue = 1; break;
					case 6:	//有钱
					shopTypeEnumValue = 6; break;
				}
				getHouseList(1,false,searchIpt,shopTypeEnumValue,areaIdentId,streetIdentId);
				mui('#houselist').on('tap','.agentDetail',function(event){
					event.stopPropagation();
					var _idx = $(this).parent('.agentList').index();
					var shopId = $(this).attr('id');
					console.log(shopId);
					openWindowWithPage('companyDetail',{
						type:_type,
						shopId:shopId
					});
					
				});
				
				/*
				 * 选择区域
				 * */
				var currentCity = areaUtils.getCurrentCityChileAreaList();
//				console.log(JSON.stringify(currentCity));
				$('#areaTmpl').tmpl(currentCity).appendTo('#segmentedControls');
				
				mui('#segmentedControls').on('tap','a',function(){	//选择区域
					pagevalue = 1;
					var parentId = this.getAttribute('href');	//parentId
					var thisId = this.getAttribute('id');		//identId
					var thisGrade = this.getAttribute('data-grade');	//grade
					
					$('.mui-pull').hide();
					if(thisId=='allArea'){		//不限区域
						areaIdentId = 0;
						streetIdentId=0;
						$('.mui-segmented-control .chooseArea').eq(0).text('区域');
					}else{
						areaIdentId = thisId;
						streetIdentId =0;
						if(thisGrade==4){
							areaIdentId = parentId;
							streetIdentId = thisId;
						}
						$('.mui-segmented-control .chooseArea').eq(0).text(this.text);
					}
//					console.log(areaIdentId+','+streetIdentId+','+searchIpt+','+_type);
					getHouseList(pagevalue,true,searchIpt,shopTypeEnumValue,areaIdentId,streetIdentId);
					
					$(this).parents('.house-tab-ul').addClass('mui-hidden');
					$('#bgZhezhao').hide();
				});		
				
				/*
				 * 搜索框搜索事件
				 * */
				document.querySelector('#openSearchPage').addEventListener('keyup',function(e){
					pagevalue =1;
					searchIpt = this.value;
					dataListArr = [];
			        getHouseList(pagevalue,true,searchIpt,shopTypeEnumValue,areaIdentId,streetIdentId);
				},false);
				document.querySelector('#openSearchPage').addEventListener('keydown',function(e){
					pagevalue =1;
					if(13 == e.keyCode){ //点击了“搜索”  
			           document.activeElement.blur();//隐藏软键盘 
			           searchIpt = $(this).val();
//			           console.log(searchIpt);
			           dataListArr = [];
			           getHouseList(pagevalue,true,searchIpt,shopTypeEnumValue,areaIdentId,streetIdentId);
			        } 
			    },false); 
//			    document.querySelector('#searchAgent').addEventListener('tap',function(){
//			    	pagevalue =1;
//			    	searchIpt = document.querySelector('#openSearchPage').value;
//			    	console.log(searchIpt);
//			        dataListArr = [];
//			    	getHouseList(pagevalue,true,searchIpt,shopTypeEnumValue,areaIdentId,streetIdentId);
//			    });
			});
			
			function getHouseList(pagevalue,isTrue,searchIpt,shopTypeEnumValue,areaIdentId,streetIdentId){
//				console.log(shopTypeEnumValue);
				var param = [{
					key:'searchKey',
					value:searchIpt
				},{
					key:'shopTypeEnumValue',
					value:shopTypeEnumValue
				},{
					key:'areaIdentId',
					value:areaIdentId
				},{
					key:'streetIdentId',
					value:streetIdentId
				},{
					key:'page',
					value:pagevalue
				},{
					key:'rows',
					value:10
				}];
				fjNetwork.get('shop/list.json',param,function(data){
//					console.log(JSON.stringify(data.rows));
					
					_listArr = data.rows;
					dataListArr = dataListArr.concat(_listArr);	//所有分页数据存储到新数组里面
					if(isTrue){
						document.querySelector('#houselist').innerHTML = '';
						mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
						$('.mui-pull').hide();
					}
					
					$('#houseListTmpl').tmpl(_listArr,{
						getAverageScore:function(){
							var commentScore = this.data.commentScore;	//总分
							var commentTotal = this.data.commentTotal;	//总人数
							if(commentTotal){
								return (commentScore/commentTotal).toFixed(2);
							}else{
								return '暂无评分';
							}
							
						},
						agentStarFull: function(){
						var commentScore = this.data.commentScore;
						var commentTotal = this.data.commentTotal;
						var score = commentTotal==0?0 : parseInt(commentScore/commentTotal);
						var starStr = [];
//						console.log(score);
						starStr.length = parseInt(score);
						return starStr;
					},
					agentStarHalf: function(){
						var commentScore = this.data.commentScore;
						var commentTotal = this.data.commentTotal;
						var score = commentTotal==0?0 : parseInt(commentScore/commentTotal);
						var halfScore = parseInt(score);
						if(halfScore>score){
							return true;
						}else{
							return false;
						}
					},
					agentStar: function(){
						var commentScore = this.data.commentScore;
						var commentTotal = this.data.commentTotal;
						var score = commentTotal==0?0 : parseInt(commentScore/commentTotal);
						var rest = parseInt(5-score);
						var starStr = [];
						starStr.length = parseInt(rest);
						return starStr;
					}
					}).appendTo('#houselist');
					
					
					
					var imgObj = $('#houselist img');
					var RATE = 1;	//常量，图片框比例
					imgObj.each(function(){
						$(this).load(function(){
							var rate = parseFloat($(this).height()/$(this).width());
							if(rate<RATE){		//高度不够
								$(this).css('height','80px');
								$(this).css('width',$(this).height()/rate);
							}else{				//宽度不够
								$(this).css('width','80px');
								$(this).css('height',$(this).width()*rate);
							}
							if($(this).width()>80){
								var marginLeft = parseInt(-($(this).width()-80)*0.5);
								$(this).css('margin-left',marginLeft);
							}
							if($(this).height()>80){
								var marginTop = parseInt(-($(this).height()-80)*0.5);
								$(this).css('margin-top',marginTop);
							}
						});
					});
					
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(_listArr.length==0);
					
				},function(msg){
					mui.toast(msg);
				});
			}

	
	document.querySelector('.mui-segmented-control .tab-a').addEventListener('tap',function(){
		var _ul = document.querySelector('.house-tab-ul');
		_ul.classList.toggle('mui-hidden');
		$('#bgZhezhao').toggle();
	});

	
	$('#bgZhezhao').on('click',function(){
		$('.fj-house-tab-div').find('.house-tab-ul').addClass('mui-hidden');
		$(this).hide();
	});

		</script>
	</body>
</html>
